<template>
	<view @click="clickBtn" class="upload">

		<view class="upload-main">
			<view class="upload-item">
				<EIcon className="item-icon" v-if="icon" :icon="icon" size="30" />
				<Image class="item-img" :src="data.outFileUrl" />
				<view class="item-mask" />
			</view>
		</view>

		<EIcon icon="right" />
	</view>
</template>

<script>
export default { name: "Upload" }
</script>

<script setup>
import { ref } from "vue"
import { uploadImage } from "@/util/uniapp"

const emit = defineEmits("upload")
const props = defineProps({
	icon: {
		type: String,
		default: "",
	},
	data: {
		type: Object,
		default: ()=>{
			return {}
		}
	}
})

const data = ref(props.data)
const clickBtn = (() => {
	if (!data.value || !data.value.id) {
		upload()
	} else {
		preview()
	}
})

const upload = async () => {
	data.value = await uploadImage()
	emit("upload",data.value);
}

const preview = () => {
	uni.showActionSheet({
		itemList: ["查看", "重新上传"],
		success: async function (res) {
			if (res.tapIndex === 0) {
				uni.previewImage({
					urls: [data.value.outFileUrl],
				})
			} else {
				upload()
			}
		},
	})
}
</script>

<style scoped lang="scss">
.upload {
	display: flex;
	align-items: center;
	flex: 1;
	height: 70rpx;
}

.upload-main {
	flex: 1;
	display: flex;
	align-items: center;
}

.upload-item {
	position: relative;
	width: 70rpx;
	height: 70rpx;
	border-radius: 10rpx;
	overflow: hidden;
	margin-right: 20rpx;

	.item-mask {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.item-img {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
	}

	.item-icon {
		position: absolute;
		z-index: 3;
		left: 20rpx;
		top: 20rpx;
	}
}
</style>
